<template>

  <div id="app">
    <keep-alive>
      <component :is="coms[rushCurrent]"></component>
    </keep-alive>
    <header>
      <div class="header-top">
        <span v-for='(item,index) in rushArr' :key="index" :class="{aaactive:rushCurrent == index}" @click='qiehuangaoliang(index)'>
          {{item}}
        </span>
      </div>
    </header>
    <!-- <MyRush></MyRush> -->
  </div>

</template>

<script>
import MyRush from './components/MyRush.vue'
import MyDijia from './components/MyDijia.vue'

export default {
  // components: { MyRush, MyDijia },
  data() {
    return {
      rushCurrent: 0,
      rushArr: ['正在抢购', '上新预告'],
      coms: [MyRush, MyDijia]
    }
  },
  methods: {
    qiehuangaoliang(index) {
      this.rushCurrent = index;
    }
  },
}
</script>

<style lang="scss" >
.aaactive {
  color: rgb(0, 119, 255);
}
* {
  padding: 0;
  margin: 0;
}
header {
  width: 100%;
  height: 40px;
  background-color: #fff;
  border-bottom: 1px solid gray;
  position: fixed;
  top: 0;
  // margin-bottom: 40px;

  .header-top {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;

    span {
      // color: orange;
      padding-right: 20px;
    }
  }
}
</style>
